<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no,email=no" />
		<title>专题详情页</title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<style type="text/css">
			.vshop-nav a.cur{ color: #E3393C; background: #fff;}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">专题详情</h1>
		</header>
		<div id="scrollDiv" class="scroll-div">
			<div class="mui-content transparent">
				<div id="topicDetail">
					
				</div>
				<ul class="mui-table-view mui-grid-view mui-clearfix vshop-product" id="productsList" style="margin-top: 10px;">
					
				</ul>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/app.js"></script>
		<script src="js/delayimg.min.js"></script>
		<script>
			mui.init({
				swipeBack: true
			});
			var productList,
				dataC,
				imgWidth;
			mui.plusReady(function() {
				var w=plus.nativeUI.showWaiting('',{padlock:true});
				topicId = plus.webview.currentWebview().topicId;
				mui.ajax(URL+'api/Topic/GetTopicDetail?id='+topicId,{
					dataType:'json',
					type:'get',
					timeout:10000,
					success:function(data){
						console.log(data)
						if(data.Success=='true'){
							dataC=data;
							document.getElementsByClassName('mui-title')[0].innerText=dataC.Topic.Name;
							var html='';
							html+='<img style="width:100%" src="'+dataC.Topic.TopImage+'"/><div class="vshop-nav">';
							if(dataC.Topic.TopicModule.length>0){
					        	for(var i=0;i<dataC.Topic.TopicModule.length;i++){
					        		if(i==0)
										html+='<a class="cur">'+dataC.Topic.TopicModule[i].Name+'</a>';
									else
										html+='<a>'+dataC.Topic.TopicModule[i].Name+'</a>';
					            }
					        	html+='</div>';
					        	document.getElementById('topicDetail').innerHTML=html;
					        	
					        	for(var j=0;j<dataC.Topic.TopicModule[0].TopicModelProduct.length;j++){
									productList+='<li class="mui-table-view-cell mui-media mui-col-xs-6">'+
	                        			'<div class="vshop-product-box">'+
											'<a data-id="'+dataC.Topic.TopicModule[0].TopicModelProduct[j].Id+'">'+
												'<div class="p-img"><img src="'+dataC.Topic.TopicModule[0].TopicModelProduct[j].Image+'"/></div>'+
												'<div class="mui-media-body">'+dataC.Topic.TopicModule[0].TopicModelProduct[j].Name+'</div>'+
												'<p class="vshop-product-price"><span>¥ '+dataC.Topic.TopicModule[0].TopicModelProduct[j].Price+'</span></p>'+
											'</a>'+
										'</div>'+
				            		'</li>';
					            }
					        	
					        	document.getElementById('productsList').innerHTML=productList;
					        	if(dataC.Topic.TopicModule[0].TopicModelProduct.length>0){
					        		imgWidth = document.getElementsByClassName('p-img')[0].offsetWidth;
					        	}
			                    for(var i=0; i<dataC.Topic.TopicModule[0].TopicModelProduct.length; i++){
			                    	document.getElementsByClassName('p-img')[i].style.height= imgWidth+'px';
			                    }
			                    delayimg.init()
//			                    delayimg.init({content:document.getElementById('scrollDiv')});
					        }
					            
							w.close();
							document.getElementsByClassName("mui-content")[0].className="mui-content";
						}
					},
					error:function(xhr,type,errorThrown){
						w.close();
						reloadWvLoad();
					}
				});
			});
			
			mui('#productsList').on('tap', 'a', function() {
				var id = this.getAttribute('data-id');
				showProduct(id);
			});
			
			var index;
            mui('#topicDetail').on('tap','.vshop-nav a',function(){
            	index=getIndex(this);
            	productList='';
            	for(var j=0;j<dataC.Topic.TopicModule[index].TopicModelProduct.length;j++){
					productList+='<li class="mui-table-view-cell mui-media mui-col-xs-6">'+
            			'<div class="vshop-product-box">'+
							'<a data-id="'+dataC.Topic.TopicModule[index].TopicModelProduct[j].Id+'">'+
								'<div class="p-img"><img src="'+dataC.Topic.TopicModule[index].TopicModelProduct[j].Image+'"/></div>'+
								'<div class="mui-media-body">'+dataC.Topic.TopicModule[index].TopicModelProduct[j].Name+'</div>'+
								'<p class="vshop-product-price"><span>¥ '+dataC.Topic.TopicModule[index].TopicModelProduct[j].Price+'</span></p>'+
							'</a>'+
						'</div>'+
            		'</li>';
	            }
            	document.getElementById('productsList').innerHTML=productList;
            	
            	document.getElementsByClassName('cur')[0].className='';
            	this.className='cur';
            	
            	for(var i=0; i<dataC.Topic.TopicModule[index].TopicModelProduct.length; i++){
                	document.getElementsByClassName('p-img')[i].style.height= imgWidth+'px';
                }
            	delayimg.init()
//          	delayimg.init({content:document.getElementById('scrollDiv')});
            });
			
			
		</script>
	</body>

</html>